<template>
  <el-container class="systems-container">
    <el-header>
      <div class="header-content">
        <h2>系统管理</h2>
        <el-button @click="router.push('/home')">返回首页</el-button>
      </div>
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="8" v-for="system in systems" :key="system.id">
          <el-card class="system-card" shadow="hover">
            <div class="system-content">
              <div class="system-header">
                <div class="system-icon">
                  <el-icon :size="40">
                    <component :is="system.icon" />
                  </el-icon>
                </div>
                <h3>{{ system.name }}</h3>
              </div>
              <div class="system-info">
                <p>{{ system.description }}</p>
                <el-button type="primary" @click="handleAccess(system)">进入系统</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'

  interface System {
    id: number
    name: string
    description: string
    icon: keyof typeof ElementPlusIconsVue
    url: string
  }

  const router = useRouter()

  const systems = ref<System[]>([
    {
      id: 1,
      name: '钻完井管理系统',
      description: '办公自动化系统，处理日常办公事务',
      icon: 'Document',
      url: 'https://dcm.cnooc/enter',
    },
    {
      id: 2,
      name: 'ERP系统',
      description: '企业资源管理系统，管理企业核心业务',
      icon: 'Setting',
      url: 'http://erp.example.com',
    },
    {
      id: 3,
      name: 'CRM系统',
      description: '客户关系管理系统，管理客户信息和销售',
      icon: 'Connection',
      url: 'http://crm.example.com',
    },
    {
      id: 4,
      name: 'BI系统',
      description: '商业智能系统，提供数据分析和报表',
      icon: 'DataLine',
      url: 'http://bi.example.com',
    },
    {
      id: 5,
      name: '项目管理',
      description: '项目管理系统，跟踪项目进度和任务',
      icon: 'List',
      url: 'http://pm.example.com',
    },
    {
      id: 6,
      name: '系统监控',
      description: 'IT系统监控平台，监控系统运行状态',
      icon: 'Monitor',
      url: 'http://monitor.example.com',
    },
  ])

  const handleAccess = async (system: System) => {
    const token = localStorage.getItem('token')
    if (token) {
      // 模拟单点登录
      ElMessage.success(`正在访问${system.name}...`)
      // 实际项目中，这里应该调用后端接口进行单点登录
      // window.open(system.url, '_blank')
      try {
        await window.electronAPI.openUrl(system.url)
      } catch (error) {
        console.error(error)
      }
    } else {
      ElMessage.error('请先登录')
      router.push('/login')
    }
  }
</script>

<style lang="scss" scoped>
  .systems-container {
    height: 100vh;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

    .system-card {
      margin-bottom: 20px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      .system-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }
    }

    .system-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 15px;
    }

    .system-icon {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-icon {
        color: #409eff;
      }
    }

    .system-info {
      width: 100%;
      text-align: center;

      h3 {
        margin: 0 0 10px 0;
        color: #303133;
      }

      p {
        color: #606266;
        margin-bottom: 20px;
        min-height: 40px;
      }
    }
  }
</style>
